import React, { PureComponent } from "react";
// import { Row, Col, Card, Badge, Button } from "antd";
import { Row, Col, Card, Button, Empty, Spin } from "antd";
import { connect } from "dva";
import { goToUrl } from "utils/comm";
// import FooterView from "../../components/footer/BottomFooter";
import { HomeLabel, ListItem } from "./components/HomeWidget";

import 应用管理 from "../../assets/images/应用管理.png";
import 流程监控 from "../../assets/images/流程监控.png";
import 流程管理 from "../../assets/images/流程管理.png";
import 租户管理 from "../../assets/images/租户管理.png";
import 表单配置 from "../../assets/images/表单配置.png";
import emptyPng from "../../assets/images/empty.png";
import wavePng from "../../assets/images/wave.png";
// import addPng from "../../assets/images/add.png";
import styles from "./index.less";

function CustomEmpty() {
  return (
    <Empty
      style={{ marginBottm: 74 }}
      image={emptyPng}
      imageStyle={{
        height: 59,
      }}
      description={<span className={styles.emptyd}>暂无数据</span>}
    />
  );
}
const statisticsTitle = ["未处理事项", "未读消息", "今日处理", "我的申请"];
const statisticsUnits = ["项", "条", "项", "项"];
const statisticsKeys = [
  {
    link: "/todo",
    menuKey: "todo",
    openMenuKey: "flow-home",
  },
  {
    link: "/message",
    menuKey: "message",
    openMenuKey: "flow-home",
  },
  {
    link: `/taskcenter?key=FlowHandle/getProProcessed`,
    menuKey: "task_center",
    openMenuKey: "flow-home",
  },
  {
    link: "/taskcenter?key=FlowHandle/getProApply",
    menuKey: "task_center",
    openMenuKey: "flow-home",
  },
];
@connect(({ HomeModel, PageNotice, loading, FlowHandle }) => ({
  flowHandleStore: FlowHandle,
  loading,
  noticeData: PageNotice.noticeData,
  statistics: HomeModel.labelValues,
}))
class HomePage extends PureComponent {
  state = {
    functionArr: [
      {
        name: "流程监控",
        obj: 流程监控,
        id: 1,
        link: "/flowmonitor/flowlist",
        menuKey: "flowmonitor_instance",
        openMenuKey: "flowmonitor",
      },
      {
        name: "租户管理",
        obj: 租户管理,
        id: 2,
        link: "/basicdata/tenantmanagement",
        menuKey: "tenantmanagement",
        openMenuKey: "basicdata",
      },
      {
        name: "应用管理",
        obj: 应用管理,
        id: 3,
        link: "/basicdata/app&businessmanagement",
        menuKey: "app&businessmanagement",
        openMenuKey: "basicdata",
      },
      {
        name: "流程管理",
        obj: 流程管理,
        id: 4,
        link: "/flowmanage/flowconfigure",
        menuKey: "flowmanage_flowconfigure",
        openMenuKey: "flowmanage",
      },
      {
        name: "表单配置",
        obj: 表单配置,
        id: 5,
        link: "/flowmanage/formconfigure",
        menuKey: "flowmanage_formconfigure",
        openMenuKey: "flowmanage",
      },
    ],
  };

  // componentWillMount() {
  // eslint-disable-next-line camelcase
  UNSAFE_componentWillMount() {
    // eslint-disable-line
    const { dispatch } = this.props;
    dispatch({ type: "HomeModel/loadCount" });
    const type = "FlowHandle/getProTodo";
    dispatch({ type, payload: { pageNum: 1, pageSize: 10 } });
  }

  render() {
    const {
      flowHandleStore,
      dispatch,
      loading,
      noticeData,
      statistics,
    } = this.props;
    const { processData: todos = [] } = flowHandleStore;
    const { noticeList = [] } = noticeData;
    const { functionArr } = this.state;

    const todoLoading = loading.effects["FlowHandle/getProTodo"];
    const noticeLoading = loading.effects["PageNotice/getNoticeList"];

    return (
      <div>
        <Row className={styles.statisticRow} justify="space-around" type="flex">
          {statisticsTitle.map((title, index) => (
            <HomeLabel
              count={statistics[index]}
              key={title}
              title={title}
              unit={statisticsUnits[index]}
              onClick={(e) => {
                e.preventDefault();
                goToUrl(
                  statisticsKeys[index].link,
                  statisticsKeys[index].menuKey,
                  statisticsKeys[index].openMenuKey,
                  dispatch,
                );
              }}
            />
          ))}
        </Row>
        <div className={styles.waveContainer}>
          <div style={{ backgroundImage: `url(${wavePng})` }} />
        </div>
        <Row gutter={16}>
          <Col span={12}>
            <Card
              title={<span className={styles.cardTitle}>待办事项</span>}
              extra={
                <a
                  className={styles.more}
                  href="#"
                  onClick={(e) => {
                    e.preventDefault();
                    goToUrl("/todo", "todo", "flow-home", dispatch);
                  }}
                >
                  查看更多
                </a>
              }
              bordered={false}
              className={styles.home_card}
              // bodyStyle={{ padding: "9px 0px" }}
              bodyStyle={{ height: 213 }}
            >
              <Spin spinning={todoLoading}>
                {todos.slice(0, 3).map((l) => {
                  return (
                    /*
                    <div key={toDoList.key} className={styles.listItem}>
                      <div className={styles.title}>
                        <Badge status="error" />
                        <a className={styles.linka}>{toDoList.title}</a>
                      </div>
                      <div className={styles.date}>
                        {toDoList.date}
                      </div>
                    </div>
                    */
                    <ListItem
                      extra={l.createTime}
                      key={l.taskId}
                      more={`${l.modelName} 申请人：${l.applyUserName}`}
                      title={l.taskName}
                    />
                  );
                })}
                {todos.length === 0 ? <CustomEmpty /> : null}
              </Spin>
            </Card>
          </Col>
          <Col span={12}>
            <Card
              title="通知公告"
              extra={
                <a
                  className={styles.more}
                  href="#"
                  onClick={(e) => {
                    e.preventDefault();
                    goToUrl("/message", "message", "flow-home", dispatch);
                  }}
                >
                  查看更多
                </a>
              }
              bordered={false}
              className={styles.home_card}
              // bodyStyle={{ padding: "9px 0px" }}
              bodyStyle={{ height: 213 }}
            >
              <Spin spinning={noticeLoading}>
                {noticeList.slice(0, 3).map((n) => {
                  return (
                    /*
                    <div key={toDoList.key} className={styles.listItem}>
                      <div className={styles.title}>
                        <Badge status="error" />
                        <a className={styles.linka}>{toDoList.title}</a>
                      </div>
                      <div className={styles.date}>
                        {toDoList.date}
                      </div>
                    </div>
                    */
                    <ListItem
                      extra={n.createTime}
                      key={n.id}
                      more={n.msgBoby}
                      title={n.processName}
                    />
                  );
                })}
                {noticeList.length === 0 ? <CustomEmpty /> : null}
              </Spin>
            </Card>
          </Col>
        </Row>
        <Row style={{ marginTop: 16 }}>
          <Card
            title="常用功能"
            bordered={false}
            bodyStyle={{ padding: "52px 40px" }}
          >
            <Row>
              {functionArr.map((item) => (
                <Col span={3} key={item.id}>
                  <Row className={styles.functionIcon}>
                    <Button
                      style={{ background: `url(${item.obj})` }}
                      block
                      shape="circle"
                      className={styles.plueButton}
                      onClick={(e) => {
                        e.preventDefault();
                        goToUrl(
                          item.link,
                          item.menuKey,
                          item.openMenuKey,
                          dispatch,
                        );
                      }}
                    />
                  </Row>
                  <Row className={styles.functionIcon}>{item.name}</Row>
                </Col>
              ))}
              {/* <Col span={3} className={styles.functionIcon}>
                <Button
                  style={{ background: `url(${addPng})` }}
                  // icon="plus"
                  block
                  shape="circle"
                  className={styles.plueButton}
                />
                <Row>添加</Row>
              </Col> */}
            </Row>
          </Card>
        </Row>
        {/* <FooterView /> */}
      </div>
    );
  }
}

export default HomePage;
